/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Show sidebar only when the cursor is over it.
   The border controlling sidebar width will be removed so you'll need to modify
   these values to change width. 
   By default the internal layout of sidebar changes when hovered, but this can
   be changed by setting pref "userchrome.autohide-sidebar.static-layout.enabled" to true
 */

/* Note: If you want only *some* sidebar to be auto-hidden, then you can use [sidebarcommand] attribute selector.
   For example, to only affect Sidebery's sidebar replace all instances of #sidebar-box with
   #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"].
   To find the sidebarcommand value for any other sidebar, open that sidebar and use Browser Toolbox to inspect it.
   See: https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html
*/
:where(#main-window) #browser{
  --uc-sidebar-width: 40px;
  --uc-sidebar-hover-width: 210px;
}
#main-window[sizemode="fullscreen"] #browser{
  --uc-sidebar-width: 1px;
}
#sidebar-box{
  --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */
  --uc-autohide-transition-duration: 115ms;
  --uc-autohide-transition-type: linear;
  --browser-area-z-index-sidebar: 3;
  position: relative;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index: var(--browser-area-z-index-sidebar,3);
  background-color: inherit;
  /* This directionality flipper is played so that sidebar "grows" into the right direction */
  direction: ltr;
  &:is([positionend],[sidebar-positionend]):not(:-moz-locale-dir(rtl)){
    direction: rtl;
  }
}
.sidebar-browser-stack{
  background: inherit;
}
#main-window[sizemode="fullscreen"] #browser{ --uc-sidebar-width: 1px; }

#sidebar-splitter{ display: none }

#sidebar-header{
  overflow: hidden;
  color: var(--chrome-color, inherit) !important;
  padding-inline: 0 !important;
}

#sidebar-header::before,
#sidebar-header::after{
  content: "";
  display: flex;
  padding-left: 8px;
}

#sidebar-header,
#sidebar{
  transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
  direction: ltr;
  &:-moz-locale-dir(rtl){
    direction: rtl;
  }
}
#sidebar-box:hover > #sidebar-header,
#sidebar-box:hover > #sidebar,
#sidebar-box:hover > .sidebar-browser-stack > #sidebar{
  min-width: var(--uc-sidebar-hover-width) !important;
  transition-delay: 0ms !important;
}

.sidebar-panel{
  background-color: transparent !important;
  color: var(--newtab-text-primary-color) !important;
}

.sidebar-panel #search-box{
  -moz-appearance: none !important;
  background-color: rgba(249,249,250,0.1) !important; 
  color: inherit !important;
}

/* Add sidebar divider and give it background */

#sidebar,
#sidebar-header{
  background-color: inherit !important;
  border-inline: 1px solid rgb(80,80,80);
  border-inline-width: 0px 1px;
}

#sidebar-box:not([positionend],[sidebar-positionend]) > :-moz-locale-dir(rtl),
#sidebar-box:is([positionend],[sidebar-positionend]) > *{
  border-inline-width: 1px 0px;
}
@media -moz-pref("sidebar.revamp") {
  #sidebar, #sidebar-header{ border-style: none }
  #sidebar-box{ padding: 0 !important; }
}
/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

#sidebar-box:not([positionend],[sidebar-positionend]):hover ~ #appcontent #statuspanel{
  inset-inline: auto 0px !important;
}
#sidebar-box:not([positionend],[sidebar-positionend]):hover ~ #appcontent #statuspanel-label{
  margin-inline: 0px !important;
  border-left-style: solid !important; 
}
@media -moz-pref("userchrome.autohide-sidebar.static-layout.enabled"){
  #sidebar-box{
    min-width: var(--uc-sidebar-width) !important;
    contain: size;
    box-shadow: var(--content-area-shadow);
  }
  #sidebar{
    min-width: var(--uc-sidebar-hover-width) !important;
  }
  .sidebar-browser-stack{
    overflow: hidden;
    width: 100%;
    transition: width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay);
    direction: ltr;
    &:hover{
      transition-delay: 0ms;
      width: var(--uc-sidebar-hover-width);
    }
    &:-moz-locale-dir(rtl){
      transition-property: transform,width !important;
    }
  }
  #sidebar-box[sidebar-positionend]:hover :is(#sidebar-header,#sidebar):-moz-locale-dir(ltr){
    transform: translateX(0);
    transition-delay: 0ms !important;
  }
  #sidebar-box:not([sidebar-positionend]):hover .sidebar-browser-stack:-moz-locale-dir(rtl){
    transform: translateX(calc(-1 * var(--uc-sidebar-hover-width) + var(--uc-sidebar-width)));
  }
  #sidebar-box[sidebar-positionend]:hover > .sidebar-browser-stack:-moz-locale-dir(rtl){
    transform: translateX(calc(var(--uc-sidebar-hover-width) - var(--uc-sidebar-width)));
    transition-delay: 0ms !important;
  }
}